<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <h1>{{title}}</h1>
            <p>price:{{price}}</p>
        </div>
    </div>
    <script>
        class Vue {
            constructor(option) {

                this.$el = document.querySelector(option.el)
                this.$data = option.data
                for (let key in option.data) {
                    Object.defineProperty(this, key, {
                        get() {
                            return this.$data[key]
                        },
                        set(val) {
                            this.$data[key] = val
                            this.render(key, val)
                        }
                    })
                }

                this.init()
            }
            //初始化，第一次的时候，渲染页面
            init() {

                for (let key in this.$data) {
                    this.render(key, this.$data[key])
                }
            }

            render(key, val) {
                console.log(key, val);
                let html = this.$el.innerHTML;
                html = html.replace(`{{${key}}}`, val)
                console.log(html);
                console.log(this.$el)
                this.$el.innerHTML = html
            }

        }

        let app = new Vue({
            el: "#app",
            data: {
                title: "vue.js",
                price: 998
            }
        })
    </script>
</body>

</html>